<template>
	<view>
		<view class="listbox" v-for="(item,index) in list" :key="index" @click="getcoupon(item)">
			<view class="infobox">
				<view class="leftbox">
					<view class="namebox">{{item.voucher_money}}代{{item.usable_money}} 元代金券</view>
					<view>
						<text>{{item.holidays_use==0?'节假日不可用':'节假日可用'}}</text>
						<text>,{{item.weekend_use==0?'周末不可用':'周末可用'}}</text>
					</view>
				</view>
				<view class="rightbox">
					已售{{item.shenyu_num-item.voucher_num}}
				</view>
			</view>
			<view class="pricebox">
				<view class="redbox">
					<view>￥{{item.voucher_money}}</view>
					<!-- <view class="linebox">{{(item.usable_money*100/item.voucher_money*100)/100}}9.5折</view> -->
				</view>
				<!-- <view>
					{{item.merch_name}}
				</view> -->
				<view class="butbox">
					抢购
				</view>
			</view>
		</view>
		<kong v-if="list.length==0&&loading"></kong>
	</view>
</template>

<script>
	import kong from '../../components/kong.vue'
	export default {
		components:{
			kong
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				// list:['全部','全平台优惠券','商城优惠券','外卖优惠券'],
				navindex:'',
				list:[],//优惠券列表
				id:'',
				loading:false,
			}
		},
		filters:{
			//过滤器 用于格式化时间
			dateFormat: function(value) {           
			    var date = new Date(value*1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			    var year = date.getFullYear();
			    var month = ("0" + (date.getMonth() + 1)).slice(-2);
			    var sdate = ("0" + date.getDate()).slice(-2);
			    var hour = ("0" + date.getHours()).slice(-2);
			    var minute = ("0" + date.getMinutes()).slice(-2);
			    var second = ("0" + date.getSeconds()).slice(-2);
			    // 拼接
			    var result = year + "-" + month + "-" + sdate //+ "- " + hour + ":" + minute //+ ":" + second;
			    // 返回
			    return result;
			},
		},
		onLoad(option) {
			this.id = option.id 
			this.getlist()
		},
		methods: {
			changeindex(index){
				this.navindex = index
				this.getlist()
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			//获取列表
			getlist(){
				// use_type  使用范围 1全平台 2商城 3外卖 
				// coupon_type  类型 1满减券 2折扣券 3现金券 
				this.$http({
					url:'api/Wechat/voucherList',
					data:{
						merch_id:this.id
					}
				}).then(res=>{
					this.list = res.data
					if(this.list.length==0){
						this.loading = true
					}else{
						this.loading = false
					}
					
				})
			},
			//领取优惠券
			getcoupon(item){
				uni.navigateTo({
					url:'/pageshop/voucherorder/voucherorder?info='+JSON.stringify(item)
				})
				//has_get==1 已领取
				// if(item.has_get==1){
				// 	uni.navigateBack({
				// 		delta:1
				// 	})
				// }else{
				// 	this.$http({
				// 		url:'api/Wechat/getCoupon',
				// 		data:{
				// 			coupon_id:item.id+""
				// 		}
				// 	}).then(res=>{
				// 		this.getlist()
				// 	})
				// }
			},
			
		}
	}
</script>

<style>
	page{
		background: linear-gradient(180deg, #F94D29 0%, #FFF 100%);
		background-repeat: no-repeat;
	}
</style>
<style lang="scss" scoped>
	.listbox{
		width: 650rpx;
		margin: 0 auto;
		background-color: #FFF;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 16rpx;
		.infobox{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.leftbox{
				font-size: 26rpx;
				font-weight: 300;
				color: #555555;
				.namebox{
					font-size: 30rpx;
					font-weight: 500;
					color: #222222;
					margin-bottom: 10rpx;
				}
			}
			.rightbox{
				font-size: 28rpx;
				font-weight: 300;
				color: #666666;
			}
		}
		.pricebox{
			display: flex;
			margin-top: 10rpx;
			justify-content: space-between;
			align-items: center;
			.redbox{
				display: flex;
				align-items: center;
				color: red;
				.linebox{
					border: solid red 2rpx;
					width: fit-content;
					padding: 10 15rpx;
					border-radius: 8rpx;
					color: red;
					margin-left: 15rpx;
					padding: 0 10rpx;
				}
			}
			.butbox{
				background: linear-gradient(267deg, #F94D29 0%, #F99529 100%);
				width:fit-content;
				padding: 15rpx 30rpx;
				color: #FFF;
				border-radius: 36rpx;
				font-size: 28rpx;
			}
		}
	}
</style>
